:root {
	--dark-hue: 235; //300, 295
	--light-hue: 235;

	// global
	--color-black: 0, 0%, 0%;
	--color-white: 0, 0%, 100%;
	// accent theme colors
	--color-accent: 208, 100%, 57%;
	--color-accent-faint: 208, 100%, 64%;
	--color-accent-deep: 208, 100%, 47%;
	// text
	--color-ink: var(--dark-hue), 35%, 92%;
	--color-ink-dull: var(--dark-hue), 10%, 70%;
	--color-ink-faint: var(--dark-hue), 10%, 55%;
	// sidebar
	--color-sidebar: var(--dark-hue), 15%, 7%;
	--color-sidebar-box: var(--dark-hue), 15%, 16%;
	--color-sidebar-line: var(--dark-hue), 15%, 23%;
	--color-sidebar-ink: var(--dark-hue), 15%, 92%;
	--color-sidebar-ink-dull: var(--dark-hue), 10%, 70%;
	--color-sidebar-ink-faint: var(--dark-hue), 10%, 55%;
	--color-sidebar-divider: var(--dark-hue), 15%, 17%;
	--color-sidebar-button: var(--dark-hue), 15%, 18%;
	--color-sidebar-selected: var(--dark-hue), 15%, 24%;
	--color-sidebar-shade: var(--dark-hue), 15%, 23%;
	// main
	--color-app: var(--dark-hue), 15%, 13%;
	--color-app-box: var(--dark-hue), 15%, 18%;
	--color-app-dark-box: var(--dark-hue), 15%, 15%;
	--color-app-darker-box: var(--dark-hue), 16%, 11%;
	--color-app-light-box: var(--dark-hue), 15%, 34%;
	--color-app-overlay: var(--dark-hue), 15%, 17%;
	--color-app-input: var(--dark-hue), 15%, 20%;
	--color-app-focus: var(--dark-hue), 15%, 10%;
	--color-app-line: var(--dark-hue), 15%, 23%;
	--color-app-divider: var(--dark-hue), 15%, 5%;
	--color-app-button: var(--dark-hue), 15%, 23%;
	--color-app-hover: var(--dark-hue), 15%, 25%;
	--color-app-selected: var(--dark-hue), 15%, 26%;
	--color-app-selected-item: var(--dark-hue), 15%, 18%;
	--color-app-active: var(--dark-hue), 15%, 30%;
	--color-app-shade: var(--dark-hue), 15%, 0%;
	--color-app-frame: var(--dark-hue), 15%, 25%;
	--color-app-slider: var(--dark-hue), 15%, 20%;
	--color-app-explorer-scrollbar: var(--dark-hue), 20%, 25%;
	// menu
	--color-menu: var(--dark-hue), 15%, 10%;
	--color-menu-line: var(--dark-hue), 15%, 14%;
	--color-menu-ink: var(--dark-hue), 25%, 92%;
	--color-menu-faint: var(--dark-hue), 5%, 80%;
	--color-menu-hover: var(--dark-hue), 15%, 30%;
	--color-menu-selected: var(--dark-hue), 5%, 30%;
	--color-menu-shade: var(--dark-hue), 5%, 0%;
}

.vanilla-theme {
	// global
	--color-black: 0, 0%, 0%;
	--color-white: 0, 0%, 100%;
	// accent theme colors
	--color-accent: 208, 100%, 57%;
	--color-accent-faint: 208, 100%, 67%;
	--color-accent-deep: 208, 100%, 47%;
	// text
	--color-ink: var(--light-hue), 5%, 20%;
	--color-ink-dull: var(--light-hue), 5%, 30%;
	--color-ink-faint: var(--light-hue), 5%, 40%;
	// sidebar
	--color-sidebar: var(--light-hue), 5%, 96%;
	--color-sidebar-box: var(--light-hue), 5%, 100%;
	--color-sidebar-line: var(--light-hue), 10%, 85%;
	--color-sidebar-ink: var(--light-hue), 5%, 20%;
	--color-sidebar-ink-dull: var(--light-hue), 5%, 30%;
	--color-sidebar-ink-faint: var(--light-hue), 5%, 40%;
	--color-sidebar-divider: var(--light-hue), 15%, 93%;
	--color-sidebar-button: var(--light-hue), 15%, 100%;
	--color-sidebar-selected: var(--light-hue), 10%, 80%;
	--color-sidebar-shade: var(--light-hue), 15%, 100%;
	// main
	--color-app: var(--light-hue), 5%, 100%;
	--color-app-box: var(--light-hue), 5%, 98%;
	--color-app-dark-box: var(--light-hue), 5%, 97%;
	--color-app-darker-box: var(--light-hue), 5%, 95%;
	--color-app-light-box: var(--light-hue), 5%, 100%;
	--color-app-overlay: var(--light-hue), 5%, 100%;
	--color-app-overlay-shade: var(--light-hue), 15%, 95%;
	--color-app-input: var(--light-hue), 5%, 100%;
	--color-app-focus: var(--light-hue), 5%, 98%;
	--color-app-line: var(--light-hue), 5%, 90%;
	--color-app-button: var(--light-hue), 5%, 100%;
	--color-app-divider: var(--light-hue), 5%, 80%;
	--color-app-selected: var(--light-hue), 5%, 93%;
	--color-app-selected-item: var(--light-hue), 5%, 96%;
	--color-app-hover: var(--light-hue), 5%, 97%;
	--color-app-active: var(--light-hue), 5%, 87%;
	--color-app-shade: var(--light-hue), 15%, 50%;
	--color-app-frame: 0, 0%, 100%;
	--color-app-slider: var(--light-hue), 5%, 95%;
	--color-app-explorer-scrollbar: var(--light-hue), 5%, 75%;
	// menu
	--color-menu: var(--light-hue), 5%, 98%;
	--color-menu-line: var(--light-hue), 5%, 95%;
	--color-menu-ink: var(--light-hue), 5%, 20%;
	--color-menu-faint: var(--light-hue), 5%, 80%;
	--color-menu-hover: var(--light-hue), 15%, 20%;
	--color-menu-selected: var(--light-hue), 5%, 30%;
	--color-menu-shade: var(--light-hue), 5%, 0%;

	// --color-menu: var(--light-hue), 16%, 99%;
	// --color-menu-line: var(--light-hue), 5%, 90%;
	// --color-menu-ink: var(--light-hue), 5%, 30%;
	// --color-menu-faint: var(--light-hue), 5%, 80%;
	// --color-menu-hover: var(--light-hue), 15%, 20%;
	// --color-menu-selected: var(--light-hue), 5%, 30%;
	// --color-menu-shade: var(--light-hue), 5%, 0%;
}
